<template>
  <div class="todoapp">
    <!-- 使用组件 -->
    <todo-header :list="list" @addTask="addTaskHandler"></todo-header>
    <todo-main @delTask="delTaskhandler" :list="showList"></todo-main>
    <todo-footer
      @clearDone="clearDoneHandler"
      @changeTask="changeTaskHandler"
      :list="showList"
    ></todo-footer>
  </div>
</template>

<script>
// 目标1:渲染列表
// 1.1在App.vue中声明数据list,并传递给子组件TodoMain.vue
// 1.2使用v-for循环渲染li,动态绑定数据
// 1.3使用v-model绑定勾选状态
// 1.4动态class根据isDone来绑定类名

// 目标2:添加数据
// 2.1在TOdoHeader.vue中双向绑定文本框，同时绑定键盘按下事件(.enter修饰符)
// 2.2当用户输入内容后按下回车,将任务名传递给父组件
// 2.3父组件封装成对象后添加到数组中
// 2.4在TodoHeader.vue中如果用户输入回车添加数据后清空

// 目标3:删除数据
// 3.1在TodoMain.vue中给删除按钮绑定点击事件,并传入id
// 3.2利用子传父技术将id传递给父组件App.vue
// 3.3在父组件中通过id找到对应数据的索引,删除数据
// 3.4数据全部删除完后在添加需要处理id的bug

// 目标4:剩余数量统计

// 目标5:数据切换
// 需求1:点谁谁亮
// 5.1定义状态isAll取值范围是all/yes/no
// 5.2给三个a标签绑定动态的class，分别判断是自己的状态时才应用selected类名
// 5.3给三个a标签绑定点击事件,点击是切换isSel为自己的状态
// 需求2数据切换
// 5.4在TodoFooter中给ul绑定事件(事件委托)
// 5.5isSel变化时将数据传递给App.vue
// 5.6将子组件传递过来的数据存储在data中
// 5.7定义计算属性,根据data中的isSel来决定返回什么数据(filter筛选数据)
// 5.8修改传递给TodoMain和TodoFooter的list为showList

// 6.1TodoFooter.vue中给清除已完成标签绑定点击事件
// 6.2子传父技术,触发父组件的时间，无需传递数据
// 6.3App.vue中直接操作原数组list,筛选出未完成的任务数组直接覆盖给list

// 目标7:数据缓存
// 7.1在App中使用watch深度侦听list
// 7.2当list变化存入localStorage(JSON.stringify)
// 7.3页面加载时默认从localStorage中取出数据(注意默认值 )

// 目标8:全选功能
// 需求1:全选影响小选
// 8.1将list从App.vue中传给TodoHeader.vue
// 8.2定义计算属性isAll，在set方法中同步list中所有的数据isDone属性
// 需求2:小选影响全选
// 8.3在get方法中使用every同步所有的勾选状态
// 8.4需要处理无数据的情况


// 引入组件
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
export default {
  name: "TodolistApp",
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },

  data() {
    return {
      list: JSON.parse(localStorage.getItem("list") || "[]"),
      isSel: "all",
    };
  },
  methods: {
    addTaskHandler(taskName) {
      let id =
        this.list.length === 0 ? 100 : this.list[this.list.length - 1].id + 1;
      this.list.push({
        id,
        name: taskName,
        isDone: false,
      });
    },
    delTaskhandler(id) {
      // console.log(id);
      let index = this.list.findIndex((item) => {
        item.id == id;
      });
      this.list.splice(index, 1);
    },
    changeTaskHandler(isSel) {
      this.isSel = isSel;
    },
    clearDoneHandler() {
      // 删除已完成
      // 直接操作原数组list即可
      let arr = this.list.filter((item) => !item.isDone);
      this.list = arr;
    },
  },
  computed: {
    showList() {
      // 根据isSel的值来决定筛选什么数据返回
      if (this.isSel === "no") {
        return this.list.filter((item) => !item.isDone);
      } else if (this.isSel === "yes") {
        return this.list.filter((item) => item.isDone);
      } else {
        return this.list;
      }
    },
  },
  watch: {
    list: {
      deep: true,
      handler() {
        localStorage.setItem("list", JSON.stringify(this.list));
      },
    },
  },
};
</script>

<style lang="scss" scoped>
</style>